<template>
  <div class="storeAdvanceAdd_content">
    <!-- 添加门店预付款 -->
    <div class="main">
      <el-form :model="infoData" ref="storeAdvanceRef" :rules="infoDataRules" label-width="120px" class="demo-ruleForm">
        <div class="basic">添加门店预付款</div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="门店名称:">
              <span>{{ infoData.storeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门店地址:">
              <span>{{ infoData.address }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当前余额:">
              <span>{{ infoData.balance }}元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="支付方式:" prop="payMethod">
              <el-select style="width: 80%" v-model="infoData.payMethod" placeholder="请选择支付方式">
                <el-option label="在线支付" value="0"></el-option>
                <el-option label="银行支付" value="1"></el-option>
                <el-option label="现金支付" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加款金额(元):" prop="money">
              <el-input v-clearEmoji style="width: 80%" v-model.trim="infoData.money" placeholder="请输入金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="14">
            <el-form-item label="备注:" prop="remake">
              <el-input v-clearEmoji type="textarea" rows="5" maxlength="100" show-word-limit style="width: 100%"
                v-model.trim="infoData.remake" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="btnDiv">
          <el-form-item>
            <el-button class="submitBtn" style="width: 88px" @click.stop="addBtn">确定</el-button>
            <el-button class="celBtn" style="width: 88px" @click.stop="cancelbtn">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getStoreAdvanceDetail, addStoreAMoney } from "@/api/genericGoods";
export default {
  name: "StoreAdvanceAdd",
  data() {
    return {
      infoData: {
        advanceId: "",
        storeName: "",
        address: "",
        balance: "",
        payMethod: "",
        money: "",
        remake: "",
      },
      infoDataRules: {
        payMethod: [
          {
            required: true,
            message: "请输入付款说明",
            trigger: "change",
          },
        ],
        money: [
          {
            required: true,
            message: "请输入付款金额",
            trigger: "blur",
          },
          {
            min: 0,
            max: 6,
            message: "付款金额最多输入5位数字",
            trigger: "blur",
          },
          {
            pattern: /^-?(?:[0-9]{1,5}|[1-9][0-9]{0-4})?$/,
            message: "只能输入整数且不超过5位数",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.infoData.advanceId = this.$route.query?.id;
    this.getStoreAdvanceDetail();
  },
  methods: {
    async getStoreAdvanceDetail() {
      console.log(this.infoData.advanceId, "id");
      const res = await getStoreAdvanceDetail({ id: this.infoData.advanceId });
      if (res.code === 200) {
        console.log(res.data, "success");
        this.infoData.storeName = res.data.storeName;
        this.infoData.address = res.data.address;
        this.infoData.balance = res.data.balance;
      }
    },
    addBtn() {
      // 判断为0
      this.$refs.storeAdvanceRef.validate(async (isOk) => {
        if (isOk) {
          console.log(this.infoData, "success");
          const res = await addStoreAMoney(this.infoData);
          console.log(res.code);
          if (res.code === 200) {
            this.$message.success("添加成功");
            this.$refs.storeAdvanceRef.resetFields();
            this.closeTag("storeAdvance");
          } else {
            // this.$message.error(res.message);
          }
        } else {
          this.$message.warning("请检查填写的信息");
        }
      });
    },
    cancelbtn() {
      this.closeTag("storeAdvance");
    },
  },
};
</script>

<style scoped lang="scss">
.storeAdvanceAdd_content {
  padding: 32px;

  .main {
    background-color: #fff;
    // padding: 50px;
  }

  .basic {
    font-family: PingFang SC, PingFang SC;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 32px;
  }

  .btnDiv {
    display: flex;
    // text-align: right;
    // padding-left: 85%;
    justify-content: end;
    padding-right: 50px;

  }

  .el-row {
    margin-bottom: 70px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
